<template>
  <aside class="ssd-aside mt2" v-if="channelList && channelList.length > 0">
    <div class="logo_box gui-paddingn pr ftp8" v-if="showhead">
      <img src="/imgs/logo.png" style="width: 106px" alt="">
    </div>
    <div class="operation-list ml2" style="flex:1" :class="[showhead?'':'mt40']"
         :style="{'paddingTop':showhead?0:'16px'}">
      <div class="operation-item pr" v-for="(item,index) in channelList" @click="handleChangeTag(item)"
           :key="index"
           :class="[currentIndex == '/channel/' + item.id ? 'active':'']">
        <div v-html="item.icon"></div>
        <span>{{ item.title }}</span>
        <i class="iconfont  ksd-bgd-left" v-if="item.hotFlag==1">热门</i>
        <i class="iconfont  ksd-bgd-left news" v-if="item.newFlag==1">最新</i>
      </div>
      <p class="use-side-menu__label mb10">工作台</p>
      <div class="operation-item" :class="[currentIndex == '/recommend' ? 'active':'']"
           @click="handleChangeTag({'url':'/recommend'})">
        <svg role="img" aria-label="compass" focusable="false" data-icon="compass" aria-hidden="true"
             viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
             class="gdesign-icon gdesign-icon-compass" style="margin-right:16px;">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM15.4189 7.52705L16.0513 7.31623C16.4422 7.18593 16.8141 7.5578 16.6838 7.94868L16.473 8.58114L16.4098 8.77073L16.4071 8.77878L14.5 14.5L8.77878 16.4071L8.77073 16.4098L8.58114 16.473L7.94868 16.6838C7.5578 16.8141 7.18593 16.4422 7.31623 16.0513L7.52705 15.4189L7.59024 15.2293L7.59293 15.2212L9.5 9.5L15.2212 7.59293L15.2293 7.59024L15.4189 7.52705ZM10.6859 10.6859L9.37171 14.6283L13.3141 13.3141L14.6283 9.37171L10.6859 10.6859Z"
                fill="currentColor"></path>
        </svg>
        <span>为你推荐</span>
      </div>
      <div class="operation-item" :class="[currentIndex == '/user/message' ? 'active':'']"
           @click="handleChangeTagUser({'url':'/user/message'})">
        <svg role="img" aria-label="user-circle" focusable="false" data-icon="user-circle" aria-hidden="true"
             viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
             class="gdesign-icon gdesign-icon-user-circle" style="margin-right: 16px;">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M11.9995 20.5012C14.2223 20.5012 16.2457 19.648 17.7603 18.2513C16.2446 16.853 14.2217 16.0012 11.9992 16.0012C9.77682 16.0012 7.75409 16.8528 6.23835 18.2509C7.75298 19.6479 9.7766 20.5012 11.9995 20.5012ZM11.9992 14.5012C14.6107 14.5012 16.9885 15.5023 18.7696 17.1416C19.8551 15.7141 20.4995 13.9329 20.4995 12.0012C20.4995 7.30674 16.6939 3.50116 11.9995 3.50116C7.30509 3.50116 3.49951 7.30674 3.49951 12.0012C3.49951 13.9327 4.1438 15.7138 5.22918 17.1412C7.01024 15.5021 9.38781 14.5012 11.9992 14.5012ZM21.9995 12.0012C21.9995 14.3661 21.1785 16.5393 19.806 18.2514L19.8062 18.2516C17.9735 20.5379 15.1573 22.0019 11.9992 22.0019C8.841 22.0019 6.02478 20.5379 4.19214 18.2516L4.19263 18.2509C2.82034 16.539 1.99951 14.3659 1.99951 12.0012C1.99951 6.47831 6.47666 2.00116 11.9995 2.00116C17.5224 2.00116 21.9995 6.47831 21.9995 12.0012ZM14 9.50195C14 10.6065 13.1046 11.502 12 11.502C10.8954 11.502 10 10.6065 10 9.50195C10 8.39738 10.8954 7.50195 12 7.50195C13.1046 7.50195 14 8.39738 14 9.50195ZM15.5 9.50195C15.5 11.4349 13.933 13.002 12 13.002C10.067 13.002 8.5 11.4349 8.5 9.50195C8.5 7.56896 10.067 6.00195 12 6.00195C13.933 6.00195 15.5 7.56896 15.5 9.50195Z"
                fill="currentColor"></path>
        </svg>
        <span>我的消息</span>
      </div>
      <div class="operation-item" :class="[currentIndex == '/user' ? 'active':'']"
           @click="handleChangeTagUser({'url':'/user'})">
        <svg role="img" aria-label="user-circle" focusable="false" data-icon="user-circle" aria-hidden="true"
             viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
             class="gdesign-icon gdesign-icon-user-circle" style="margin-right: 16px;">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M11.9995 20.5012C14.2223 20.5012 16.2457 19.648 17.7603 18.2513C16.2446 16.853 14.2217 16.0012 11.9992 16.0012C9.77682 16.0012 7.75409 16.8528 6.23835 18.2509C7.75298 19.6479 9.7766 20.5012 11.9995 20.5012ZM11.9992 14.5012C14.6107 14.5012 16.9885 15.5023 18.7696 17.1416C19.8551 15.7141 20.4995 13.9329 20.4995 12.0012C20.4995 7.30674 16.6939 3.50116 11.9995 3.50116C7.30509 3.50116 3.49951 7.30674 3.49951 12.0012C3.49951 13.9327 4.1438 15.7138 5.22918 17.1412C7.01024 15.5021 9.38781 14.5012 11.9992 14.5012ZM21.9995 12.0012C21.9995 14.3661 21.1785 16.5393 19.806 18.2514L19.8062 18.2516C17.9735 20.5379 15.1573 22.0019 11.9992 22.0019C8.841 22.0019 6.02478 20.5379 4.19214 18.2516L4.19263 18.2509C2.82034 16.539 1.99951 14.3659 1.99951 12.0012C1.99951 6.47831 6.47666 2.00116 11.9995 2.00116C17.5224 2.00116 21.9995 6.47831 21.9995 12.0012ZM14 9.50195C14 10.6065 13.1046 11.502 12 11.502C10.8954 11.502 10 10.6065 10 9.50195C10 8.39738 10.8954 7.50195 12 7.50195C13.1046 7.50195 14 8.39738 14 9.50195ZM15.5 9.50195C15.5 11.4349 13.933 13.002 12 13.002C10.067 13.002 8.5 11.4349 8.5 9.50195C8.5 7.56896 10.067 6.00195 12 6.00195C13.933 6.00195 15.5 7.56896 15.5 9.50195Z"
                fill="currentColor"></path>
        </svg>
        <span>个人设置</span>
      </div>
      <div class="operation-item" :class="[currentIndex == '/user/buy' ? 'active':'']"
           @click="handleChangeTagUser({'url':'/user/buy'})">
        <svg data-v-7f249ca1="" style="margin-right: 16px;" role="img" aria-label="apps" focusable="false"
             data-icon="apps" aria-hidden="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
             class="gdesign-icon gdesign-icon-apps">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M9.06897 4.5H5C4.72386 4.5 4.5 4.72386 4.5 5V9.06897C4.5 9.34511 4.72386 9.56897 5 9.56897H9.06897C9.34511 9.56897 9.56897 9.34511 9.56897 9.06897V5C9.56897 4.72386 9.34511 4.5 9.06897 4.5ZM19 4.5H14.931C14.6549 4.5 14.431 4.72386 14.431 5V9.06897C14.431 9.34511 14.6549 9.56897 14.931 9.56897H19C19.2761 9.56897 19.5 9.34511 19.5 9.06897V5C19.5 4.72386 19.2761 4.5 19 4.5ZM9.06897 14.431H5C4.72386 14.431 4.5 14.6549 4.5 14.931V19C4.5 19.2761 4.72386 19.5 5 19.5H9.06897C9.34511 19.5 9.56897 19.2761 9.56897 19V14.931C9.56897 14.6549 9.34511 14.431 9.06897 14.431ZM19 14.431H14.931C14.6549 14.431 14.431 14.6549 14.431 14.931V19C14.431 19.2761 14.6549 19.5 14.931 19.5H19C19.2761 19.5 19.5 19.2761 19.5 19V14.931C19.5 14.6549 19.2761 14.431 19 14.431ZM9.06897 3C10.1735 3 11.069 3.89543 11.069 5V9.06897C11.069 10.1735 10.1735 11.069 9.06897 11.069H5C3.89543 11.069 3 10.1735 3 9.06897L3 5C3 3.89543 3.89543 3 5 3L9.06897 3ZM19 3C20.1045 3 21 3.89543 21 5V9.06897C21 10.1735 20.1045 11.069 19 11.069H14.931C13.8264 11.069 12.931 10.1735 12.931 9.06897V5C12.931 3.89543 13.8264 3 14.931 3L19 3ZM5 12.931H9.06897C10.1735 12.931 11.069 13.8264 11.069 14.931V19C11.069 20.1045 10.1735 21 9.06897 21H5C3.89543 21 3 20.1045 3 19L3 14.931C3 13.8264 3.89543 12.931 5 12.931ZM19 12.931C20.1045 12.931 21 13.8264 21 14.931V19C21 20.1045 20.1045 21 19 21H14.931C13.8264 21 12.931 20.1045 12.931 19V14.931C12.931 13.8264 13.8264 12.931 14.931 12.931H19Z"
                fill="currentColor"></path>
        </svg>
        <span>我的订单</span>
      </div>
    </div>
    <div class="operation-item">
      <div v-if="userStore.isLogin && userStore.viptype == 1 && userStore.vipshow" @click.prevent.stop="handleOpenVip">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch mainbg3"><i
              class="iconfont icon-dongtaixiangqingpingfen-yipingfenhuaduo mr5"></i>升级会员
          </div>
        </div>
      </div>
      <nuxt-link to="/admin/user" style="display: block" v-if="userStore.isLogin && userStore.role == 'admin'">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch"><i class="iconfont icon-yonghu mr5"></i>用户管理</div>
        </div>
      </nuxt-link>
      <nuxt-link to="/admin/channel" style="display: block" v-if="userStore.isLogin && userStore.role == 'admin'">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch"><i class="iconfont icon-kechengbiao mr5"></i>栏目管理</div>
        </div>
      </nuxt-link>
      <nuxt-link to="/admin/ncategory" style="display: block" v-if="userStore.isLogin && userStore.role == 'admin'">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch"><i class="iconfont icon-kechengbiao mr5"></i>分类管理</div>
        </div>
      </nuxt-link>
      <nuxt-link to="/admin/note" style="display: block" v-if="userStore.isLogin && userStore.role == 'admin'">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch"><i class="iconfont icon-kechengbiao mr5"></i>课程管理</div>
        </div>
      </nuxt-link>
      <nuxt-link to="/admin/special" style="display: block" v-if="userStore.isLogin && userStore.role == 'admin'">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch"><i class="iconfont icon-kechengbiao mr5"></i>专题管理</div>
        </div>
      </nuxt-link>
      <nuxt-link to="/admin/resume" style="display: block" v-if="userStore.isLogin && userStore.role == 'admin'">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch"><i class="iconfont icon-kechengbiao mr5"></i>简历服务管理</div>
        </div>
      </nuxt-link>
      <nuxt-link to="/admin/template" style="display: block" v-if="userStore.isLogin && userStore.role == 'admin'">
        <div class="flex w100 align-center justify-center">
          <div class="use-side-menu__switch"><i class="iconfont icon-kechengbiao mr5"></i>简历模板管理</div>
        </div>
      </nuxt-link>
    </div>
    <teleport to="body">
      <ksd-vip ref="userVipRef"></ksd-vip>
    </teleport>
  </aside>
</template>
<script setup lang="ts">
const channelList = ref([])
const route = useRoute()
const currentIndex = ref(route.fullPath)
const userStore = useStore.userState()
const userVipRef = ref<any>({})
defineProps({
  showhead: {
    type: Boolean,
    default: false
  }
})


const handleLoginFinshed = async () => {
  window.location.reload()
}

const handleOpenVip = async () => {
  await useLoginDialog()
  userVipRef.value.handleOpen()
}

const handleLoadChannel = async () => {
  var items = sessionStorage.getItem("cc-channelList")
  if (!items) {
    const resp = await useLoadChannelList()
    channelList.value = resp.data
    sessionStorage.setItem("cc-channelList", JSON.stringify(resp.data))
  } else {
    channelList.value = JSON.parse(items)
  }
}

const handleChangeTag = (item:any) => {
  var currentPath = "/channel/"+item.id
  if (currentIndex.value == currentPath) return
  currentIndex.value = currentPath
  navigateTo(currentPath)
}

const handleChangeTagUser = async (item:any) => {
  if (currentIndex.value == item.url) return
  await useLoginDialog()
  currentIndex.value = item.url
  navigateTo(item.url)
}

onMounted(() => {
  currentIndex.value = route.fullPath
  handleLoadChannel()
})
</script>
